import styled from 'styled-components'

export const StyledDirectoryContainer = styled.div`
  position: relative;
  height: 100vh;
  padding: 20px;
  font-family: 'SmileySans-Oblique', sans-serif;
`

export const StyledFileIcon = styled.div`
    width: 24px;
    margin-right: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
`;

export const StyledFileList = styled.div`
    flex-grow: 1;
    overflow-y: auto;
    position: relative;
`;

export const StyledFileItem = styled.div<{ selected?: boolean }>`
    display: flex;
    padding: 8px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    position: relative;
    background-color: ${props => props.selected ? '#e1f0ff' : 'transparent'};

    &:hover {
        background-color: ${props => props.selected ? '#e1f0ff' : '#f5f5f5'};
    }
`;

export const StyledFileName = styled.div`

  flex-grow: 1;
`;

export const StyledFileSize = styled.div`
  width: 80px;
  text-align: right;
  margin-right: 16px;
`;

export const StyledFileDate = styled.div`
  width: 180px;
`;

export const StyledSelectionBox = styled.div`
  position: absolute;
  background-color: rgba(0, 120, 215, 0.1);
  border: 1px solid rgba(0, 120, 215, 0.5);
  pointer-events: none;
`;